<template>
  <div class="estate">
    <div class="w">
      <!-- 搜索栏-start -->
      <Search :searchText='params.text' @search="getSearchText"></Search>
      <!-- 搜索栏-end -->

      <!-- 多项筛选框-start -->
      <div class="select-box">
        <!-- 默认显示-start -->
        <div class="select-show">
          <!-- 区域选择-start -->
          <div class="select-area clearfix">
            <div class="select-title fl"><b>区域</b></div>
            <div class="selection fl">
              <div class="select-tab">
                <a :class="item.isActive?'active':''" v-for="(item, index) in areaData" :key="index" @click="changeRegion(item, index)">{{item.label}}</a>
              </div>
              <div class="second-tabs" v-show="areaData[firstRegion.index].children.length != 0">
                <a :class="[v.isActive?'active':'', v.disabled?'disabled':'']" v-for="(v, i) in areaData[firstRegion.index].children" :key="i" @click="changeRegion(v, i)">
                  {{v.label}}
                </a>
              </div>
            </div>
          </div>
          <!-- 区域选择-end -->
          <!-- 筛选-start -->
          <div class="select-area clearfix">
            <div class="select-title fl">
              <b>{{ a_price.title }}</b>
            </div>
            <div class="selection fl">
              <div class="select-tab">
                <el-radio-group v-model="averageItem" text-color>
                  <el-radio v-for="(v, i) in a_price.tabs" :key="i" :label="v" @change="changeAverage">{{ v.label }}</el-radio>
                  <!-- 自定义选项-start -->
                  <span class="selected-input" v-if="false">
                    <input type="text" v-model="a_price.price1" maxlength="5" onkeyup="value=value.replace(/[^\d]/g,'')" />
                    <span class="em">-</span>
                    <input type="text" v-model="a_price.price2" maxlength="5" onkeyup="value=value.replace(/[^\d]/g,'')" /><span class="em">元</span>
                    <button type="button" class="price-btn" :disabled="a_price.price1 >= a_price.price2 ? true : false" @click="addTag">确定</button>
                    <!-- <el-button size="mini" type='primary' :disabled="a_price.price1 >= a_price.price2" @click="addTag(index)">确定</el-button> -->
                  </span>
                  <!-- 自定义选项-end -->
                </el-radio-group>
              </div>
            </div>
          </div>
          <div class="select-area clearfix">
            <div class="select-title fl">
              <b>筛选</b>
            </div>
            <div class="selection fl">
              <div class="select-tab">
                <el-select class="houseAge" v-model="params.builtYear" placeholder="楼龄" @change="changeAge">
                  <el-option v-for="item in options.houseAge" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <el-select class="property" v-model="params.purpose" placeholder="物业用途" @change="changePurpose">
                  <el-option v-for="item in options.property" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="select-area clearfix">
            <div class="select-title fl">
              <b>排列</b>
            </div>
            <div class="selection fl">
              <div class="select-tab">
                <el-button :class="b_actice == 0 ? 'active' : ''" plain @click="changeArray(0)">默认</el-button>
                <el-button :class="b_actice > 0 ? 'active' : ''" plain @click="changeArray(1)">均价<img :src="a_p_img"></el-button>
              </div>
            </div>
          </div>
        </div>
        <!-- 筛选-end -->
        <!-- 默认显示-end -->

        <div class="tags" v-show="checkList.length != 0 || firstRegion.index != 0">
          <span>当前选中:</span>
          <el-tag v-show="firstRegion.index != 0" closable color="#fff" disable-transitions @close="deleteRegion(firstRegion)">
            {{firstRegion.value}}
          </el-tag>

          <el-tag v-show="secondRegion.index != 0" closable color="#fff" disable-transitions @close="deleteRegion(secondRegion)">
            {{secondRegion.value}}
          </el-tag>

          <!-- <el-tag v-for="(item, index) in checkList" :key="index" closable color="#fff" disable-transitions @close="deleteTag(index)">
            {{item}}
          </el-tag> -->

          <em class="el-icon-delete" @click="deleteTags">清空筛选</em>
        </div>
      </div>
      <!-- 多项筛选框-end -->
      <!-- 小区列表-start -->
      <div class="content">
        <div class="none-tip" v-if="params.total == 0">
          <img src="@/assets/images/none.png" alt="">
          <span>很抱歉, 没能找到您想要的小区, 请尝试其他关键词查找吧</span>
        </div>
        <ul class="clearfix">
          <li v-for="(v, i) in initData.list" :key="i" @click="openPage(v.id)">
            <div class="cover">
              <img :src="v.img" alt="" width="380" height="285">
            </div>
            <div class="info">
              <div class="name">{{v.estateName}}</div>
              <div class="local">{{v.location}}</div>
              <div class="deal">30天内成交{{v.deal}}套</div>
              <div class="line"></div>
              <el-tag class="tag1" v-if="v.average != 0">均价{{v.average}}元/㎡</el-tag>
              <el-tag class="tag1" v-else>暂无价格</el-tag>
              <el-tag class="tag2" type="info">{{v.sellingTotal}}套在售</el-tag>
            </div>
          </li>
        </ul>
      </div>
      <!-- 小区列表-end -->
      <!-- 分页 -->
      <el-pagination @current-change="handleCurrentChange" :current-page="params.page" background layout="prev, pager, next" :page-size="15" :total="params.total">
      </el-pagination>

    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Search from "@/components/Search";
import "@/assets/less/estate.less";
export default {
  name: "Estate",

  components: {
    Header,
    Search
  },
  data() {
    return {
      loading: false,
      initData: {
        list: []
      },
      // 价格
      averageItem: '',
      // 复选框信息筛选
      checkList: [],
      // 第一个区域
      firstRegion: {
        value: "不限",
        index: 0,
        level: 2,
      },
      // 第二个区域
      secondRegion: {
        value: "不限",
        index: 0,
        level: 3,
        firstIndex: 0,
      },
      // 区域数据
      areaData: [],
      // 均价
      a_price: {
        title: "均价",
        tabs: [
          { label: "不限", value: '' },
          { label: "6千以下", value: 6000, type: 0 },
          { label: "6-8千", value: [6000, 8000], type: 1 },
          { label: "8千-1万", value: [8000, 10000], type: 1 },
          { label: "1万-1.2万", value: [10000, 12000], type: 1 },
          { label: "1.2万-1.5万", value: [12000, 15000], type: 1 },
          { label: "1.5万-2万", value: [15000, 2000], type: 1 },
          { label: "2万-2.5万", value: [20000, 25000], type: 1 },
          { label: "2.5万以上", value: 25000, type: 2 },
        ],
        price1: '',
        price2: ''
      },
      // 筛选
      options: {
        houseAge: [
          {
            label: '不限(楼龄)',
            value: '',
          },
          {
            label: '2年以内',
            value: '<2',
          },
          {
            label: '5年以内',
            value: '<5',
          },
          {
            label: '10年以内',
            value: '<10',
          },
          {
            label: '15年以内',
            value: '<15',
          },
          {
            label: '20年以内',
            value: '<20',
          },
          {
            label: '20年以上',
            value: '>20',
          },
        ],
        property: [
          {
            label: '不限(物业用途)',
            value: '',
          },
          {
            label: '住宅',
            value: '住宅',
          },
          {
            label: '写字楼',
            value: '写字楼',
          },
          {
            label: '商铺',
            value: '商铺',
          },
          {
            label: '工业',
            value: '工业',
          },
          {
            label: '教育',
            value: '教育',
          },
          {
            label: '医疗',
            value: '医疗',
          },
          {
            label: '车位',
            value: '车位',
          },
        ]
      },
      houseAge: '',
      property: '',
      a_p_img: require('@/assets/images/e00-01.png'),
      b_actice: 0,
      params: {
        city: '广州',
        page: 1,
        total: 0,
        size: 12,
        text: '',
        firstRegion: '',
        secondRegion: '',
        average: '',
        builtYear: '',
        purpose: '',
        order: ''
      }
    }
  },
  created() {
    let isLogin = false;
    if (this.$cookies.get('__tk')) {
      isLogin = true;
    } else {
      isLogin = false;
    }
    let oj = {
      title: "小区",
      nav: "Estate",
      isLogin: isLogin,
    };
    this.$emit("isTitle", oj);
    this.areaData = JSON.parse(JSON.stringify(this.$root.areaData));
    this.averageItem = this.a_price.tabs[0];
    if (this.$route.params.text) {
      this.params.text = this.$route.params.text;
    }
    this.init();
  },
  mounted() {
    this.$nextTick(() => {
      document.body.scrollTo(0, 0);
      window.scrollTo(0, 0);
      document.getElementById('index').scrollTop = 0
      window.pageYOffset = 0;
    })
  },
  methods: {
    init() {
      this.axios({
        method: 'get',
        url: this.baseUrl + '/getEstateList',
        params: {
          city: this.params.city,
          page: this.params.page,
          size: this.params.size,
          text: this.params.text,
          firstRegion: this.params.firstRegion,
          secondRegion: this.params.secondRegion,
          average: this.params.average,
          builtYear: this.params.builtYear,
          purpose: this.params.purpose,
          order: this.params.order,
        }
      }).then(res => {
        console.log('res==>', res)
        if (res.data.code == 200) {
          this.initData.list = res.data.data;
          this.params.total = res.data.total;
        }
      }).catch(err => {
        console.log('err==>', err)
        this.$message.error(res.data.msg)
      })
    },
    goPage(n) {
      this.$router.push({ name: n });
    },
    // 跳转新标签
    openPage(i) {
      let routeUrl = this.$router.resolve(`/estate_detail/${i}`);
      window.open(routeUrl.href, "_blank");
    },
    // 获取组件关键词
    getSearchText(t) {
      console.log('estate')
      this.params.text = t || '';
      this.params.page = 1;
      this.init();
    },
    // 改变区域
    changeRegion(o, i) {
      console.log(o);
      // 点击的区域是高亮,返回
      if (o.isActive) {
        return;
      }

      // 判断父级选项还是子级
      if (o.level == 2) {
        // 清除之前高亮的选项
        for (let key of this.areaData) {
          if (key.isActive) {
            key.isActive = false;
          }
        }
        o.isActive = true; // 点击的选项高亮

        this.firstRegion.value = o.value; // 保存选项的值
        console.log("this.firstRegion.value", this.firstRegion.value);
        this.firstRegion.index = i; // 保存选项的索引值
        this.secondRegion.index = 0; // 隐藏子选项的标签
        this.params.firstRegion = o.value;
        this.params.secondRegion = '';

        if (i == 0) {
          // 点击 不限 选项
          this.params.firstRegion = '';
          this.params.secondRegion = '';
          this.params.page = 1;
          this.init();
          return;
        } else {
          this.params.page = 1;
          this.init();
          if (o.children[0].isActive) {
            this.params.secondRegion = '';
            return;
          }

          // 初始化子选项高亮
          for (let key of o.children) {
            if (key.isActive) {
              key.isActive = false;
            }
          }
          o.children[0].isActive = true; // 子选项第一个高亮
          this.secondRegion.value = "不限"; // 标签赋值
          // console.log("this.secondRegion.value ==>", this.secondRegion.value);
        }
      } else if (o.level == 3) {
        // 点击选项为子选项
        // 清除之前高亮的选项
        for (let key of this.areaData[this.firstRegion.index].children) {
          if (key.isActive) {
            key.isActive = false;
          }
        }
        o.isActive = true; // 点击的选项高亮

        this.secondRegion.value = o.value; // 赋值
        console.log("this.secondRegion.value ==>", this.secondRegion.value);
        this.secondRegion.index = i; // 保存索引值
        this.secondRegion.firstIndex = this.firstRegion.index; // 保存父元素索引值
        this.params.secondRegion = i == 0 ? '' : o.value;
        this.params.page = 1;
        this.init();
      }
    },
    // 删除区域标签
    deleteRegion(o) {
      if (o.level == 3) {
        this.areaData[o.firstIndex].children[o.index].isActive = false;
        this.areaData[o.firstIndex].children[0].isActive = true;
        o.value = "不限";
        o.index = 0;
        this.params.secondRegion = '';
        this.params.page = 1;
        this.init();
      }
      if (o.level == 2) {
        this.areaData[0].isActive = true;
        this.secondRegion.index = 0;
        if (this.areaData[o.index].children[this.secondRegion.index].isActive) {
          this.areaData[o.index].isActive = false;
          o.index = 0;
          this.params.firstRegion = '';
          this.params.page = 1;
          this.init();
          return;
        }
        this.areaData[o.index].children[
          this.secondRegion.index
        ].isActive = false;
        this.areaData[o.index].children[0].isActive = true;
        this.areaData[o.index].isActive = false;
        o.index = 0;
        this.params.firstRegion = '';
        this.params.secondRegion = '';
        this.params.page = 1;
        this.init();
      }
    },

    // 价格单选
    changeAverage() {
      console.log(this.averageItem);
      this.params.average = this.averageItem;
      this.params.page = 1;
      this.init();
      console.log('average==>', this.params.average)
    },
    // 自定义标签
    addTag() {
      console.log('自定义标签')
      let str = this.a_price.price1 + '-' + this.a_price.price2 + '元';
      this.checkList.push(str)
    },
    // 清空标签
    deleteTags() {
      this.checkList = [];
      if (this.firstRegion.index == 0) {
        return;
      }
      this.deleteRegion(this.firstRegion);
      this.params = {
        city: this.params.city,
        page: 1,
        text: this.params.text,
        firstRegion: '',
        secondRegion: '',
        average: '',
        builtYear: '',
        purpose: '',
        order: '',
      }
    },
    // 楼龄
    changeAge(k) {
      console.log('age', k)
      this.params.builtYear = k;
      this.params.page = 1;
      this.init();
    },
    // 物业
    changePurpose(k) {
      console.log('purpose', k)
      this.params.purpose = k;
      this.params.page = 1;
      this.init();
    },
    // 排序
    changeArray(n) {
      switch (n) {
        case 0:
          this.b_actice = 0;
          this.a_p_img = require('@/assets/images/e00-01.png')
          this.params.order = '';
          this.params.page = 1;
          this.init();
          return;
        case 1:
          if (this.b_actice == 1) {
            this.b_actice = 2;
            this.a_p_img = require('@/assets/images/e00-02.png')
            this.params.order = 1;
            this.params.page = 1;
            this.init();
          } else {
            this.b_actice = 1;
            this.a_p_img = require('@/assets/images/e00-03.png')
            this.params.order = 0;
            this.params.page = 1;
            this.init();
          }
      }
    },
    // 当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.page = val;
      this.init();
      this.$nextTick(() => {
        document.body.scrollTo(0, 0);
        window.scrollTo(0, 0);
        document.getElementById('index').scrollTop = 0
        window.pageYOffset = 0;
      })
    },
  },
};
</script>

<style lang="less" scoped>
</style>